<template>

  <div class="tree-container">
    <vab-query-form>
      <vab-query-form-left-panel>

        <el-button icon="el-icon-plus" type="primary"@click="handleAdd(0,'')">
          创建项目类目
        </el-button>

      </vab-query-form-left-panel>
      <vab-query-form-right-panel>



<!--          <search-input v-model="form.mark" multiple :config="sConfig" @change="projectMarkChange1"   placeholder="请输入项目关键词"></search-input>-->

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <el-input v-model="form.mnemonicCodeOrName"  placeholder="请输入项目名字/编码/助记码"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary"  @click="searchAllItemInfos">查询</el-button>

      </vab-query-form-right-panel>
    </vab-query-form>

    <el-container style="height: 500px; border: 1px solid #ebeef5">

       <el-aside style="background-color: rgb(238, 241, 246);max-width: 200px;height: 100%"  >

<!--         <el-button style="padding: 6px;margin-left: 10px" type="text" @click="handleAdd(0,'')" >创建项目类目</el-button>-->
          <div  class="el-tree-wrap" >
            <el-tree
              node-key="id"
              :default-expanded-keys="[expanded]"
               style="height: 100%"
              class="vab-filter-tree"
              highlight-current
              :data="data"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :props="defaultProps"


            >

      <span class="custom-tree-node" slot-scope="{node, data }">

        <span>{{ data.name }}
          <el-button
          type="text"
          size="mini"
          >

            <i class="el-icon-circle-plus-outline" @click.stop="handleAdds(data)" title="创建类目">


  </i>

          </el-button>



<el-button
  type="text"
  size="mini"
  @click.stop="() => handleAddss(data)">
               <i class="el-icon-edit" title="编辑类目"></i>



          </el-button>

        </span>
        <span>

        </span>

      </span>

            </el-tree>
            <el-dialog
              :title="titles"
              :visible.sync="dialogFormVisibles"
              width="500px"
              z-index="888888"

            >
              <el-form ref="treeForm" :model="treeForm"  label-width="80px">

                <el-form-item label="类目名称"  required >
                  <el-input v-model="treeForm.name" autocomplete="off"></el-input>
                </el-form-item>


              </el-form>
              <div slot="footer" class="dialog-footer" >
                <el-button @click="close">取 消</el-button>
                <el-button
                  @click="append" >确 定</el-button>
              </div>


            </el-dialog>
          </div>


        </el-aside>


      <el-container>


        <el-main>
          <el-button icon="el-icon-plus" type="primary" @click="childadd(0,'')" v-if="ischildadd">
            添加子项
          </el-button>
          <el-table
            style="height:calc( 100vh - 300px-100 ) !important"
            ref="tableSort"

            :data="list"

            v-loading="listLoading"

          >
            <el-table-column

              label="项目编码"
              prop="mark"
             width="180px"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="项目名称"
              prop="name"

            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              label="助记码"
              prop="mnemonicCode"

            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="日费用"
              prop="dailyFee"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="monthFee"
              label="月费用"

            ></el-table-column>
            <el-table-column label="是否为护理项目" prop="nurseItemBol" width="120px">
              <template slot-scope="scope" >
                <span v-if="scope.row.nurseItemBol==false">否</span>
                <span v-if="scope.row.nurseItemBol==true">是</span>
              </template>
            </el-table-column>
            <el-table-column label="是否为收费项目" prop="charged" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.charged==false">否</span>
                <span v-if="scope.row.charged==true">是</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="fee"
              label="价格"

            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="unit"
              label="单位"

            ></el-table-column>
            <el-table-column label="是否可自由定价" prop="change" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.change==false">否</span>
                <span v-if="scope.row.change==true">是</span>
              </template>
            </el-table-column>
            <el-table-column label="禁用状态" prop="gender">
              <template slot-scope="scope">
                <span v-if="scope.row.disabled==true"><el-tag type="warning">禁用</el-tag></span>
                <span v-if="scope.row.disabled==false"><el-tag type="success">启用</el-tag></span>
              </template>
            </el-table-column>





            <el-table-column
              show-overflow-tooltip
              label="操作"
              width="180px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text"    @click="childadd(scope.row.id,scope.row)">修改 <i class="el-icon-edit"></i></el-button>



              </template>
            </el-table-column>

          </el-table>
          <el-pagination
            :background="background"


            :total="total"
            :page-size="queryForm.limit"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </el-main>

      </el-container>
    </el-container>

    <el-dialog
      title="创建项目类目"
      :visible.sync="dialogFormVisible"
      width="500px"

    >
      <el-form ref="treeForm" :model="treeForm"  label-width="80px">

        <el-form-item label="类目名称"  required >
          <el-input v-model="treeForm.name" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="close">取 消</el-button>
        <el-button
          @click="Saveadd" >确 定</el-button>
      </div>


    </el-dialog>

    <el-dialog
      :title="titles"
      :visible.sync="dialogFormVisibless"
      width="500px"

    >
      <el-form ref="treeForm" :model="treeForm"  label-width="80px">

        <el-form-item label="类目名称"  required>
          <el-input v-model="treeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="禁用状态" prop="name"  >
          <el-select v-model="value" placeholder="请选择" style="width: 350px;" @change="changrpe">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="close">取 消</el-button>
        <el-button
           @click="replei">确 定</el-button>
      </div>


    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="childdialogFormVisible"
      width="500px"
      destroy-on-close
    >
      <el-form ref="childtreeForm" :rules="rules" :model="childtreeForm"  :inline="true" >

        <el-form-item label="子项目名称"  prop="name">
          <el-input v-model="childtreeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="助记码"  style="margin-left: 38px;">
          <el-input v-model="childtreeForm.mnemonicCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位"  style="margin-left: 50px;">
          <el-input v-model="childtreeForm.unit" autocomplete="off"  ></el-input>
        </el-form-item>
        <el-form-item label="是否为护理项目"  required  >
          <el-select v-model="value1" placeholder="请选择" width="350px"   @change="change1" :disabled="disabled">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"

              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为收费项目"  prop="charged">
          <el-select v-model="value2" placeholder="请选择" width="350px" @change="change2">
            <el-option
              v-for="item in option"
              :key="item.value1"
              :label="item.label1"
              :value="item.value1">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否可自由定价" required v-if="isshow" >
          <el-select v-model="value3" placeholder="请选择" width="350px" @change="change3">
            <el-option
              v-for="item in option"
              :key="item.value2"
              :label="item.label2"
              :value="item.value2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格"  v-if="isshow" required>
          <el-input v-model="childtreeForm.fee" autocomplete="off" type="number" min="0"></el-input>
        </el-form-item>
<!--        <el-form-item label="禁用状态" required prop="disabled"  >-->
<!--          <el-select v-model="childtreeForm.disabled" placeholder="请选择" style="width: 260px;" >-->
<!--            <el-option-->
<!--              v-for="item in isdisabled"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="close">取 消</el-button>
        <el-button
          @click="childsave" >确 定</el-button>
      </div>


    </el-dialog>
  </div>



</template>

<script>
    import { add } from "@/api/categroy";
    import { search } from "@/api/categroy";
    import { repchild } from "@/api/categroy";
    import { searchchild,searchAllItemInfos } from "@/api/categroy";
    import { editsave } from "@/api/categroy";
    import { createchild } from "@/api/categroy";
    import { replei } from "@/api/categroy";
    import searchInput from '@/components/searchInput'
    let id=1000
    export default {

        name: "Category",
        components: {
            searchInput
        },

        data() {
            return {
                isshow:false,
                title:'',
                titles:"",
                expanded:"",
                // sConfig: {
                //     api: '/sinohis/pension/fee/itemmanager/searchAllItemInfos',
                //     method: 'post',
                //     postKey: 'mnemonicCodeOrName',
                //     label: 'name',
                //     value: 'mark',
                //     data: { nurseItemBol: true },
                //     keys: [
                //         { name: '名称', key: 'name' },
                //         { name: '价格', key: 'fee' },
                //     ]
                // },
                form:{
                    mnemonicCodeOrName:"",
                    nurseItemBol: true
            },
                options: [
                    {
                        value: 'true',
                        label: '禁用',
                    },
                    {
                        value: 'false',
                        label: '启用',

                    },
                ],
                option: [
                    {
                        value: 'true',
                        label: '是',
                        value1: 'true',
                        label1: '是',
                        value2: 'true',
                        label2: '是',
                    },
                    {
                        value: 'false',
                        label: '否',
                        value1: 'false',
                        label1: '否',
                        value2: 'false',
                        label2: '否'
                    },
                ],
                isdisabled:[

                    {
                        value: true,
                        label: '禁用',

                    },
                    {
                        value: false,
                        label: '启用',

                    }

                ],
                id:0,
                value: '',
                value1: '',
                value2:"",
                value3:'false',
                listLoading:true,
                data: [

                ],
                background:true,
                childdialogFormVisible:false,
                dialogFormVisibless:false,
                dialogFormVisible:false,
                dialogFormVisibles:false,
                ischildadd:false,
                list:[],
                total: 0,
                childtreeForm:{
                           name:"",
                           fee:"",
                    parentMark:"",
                    charged:"",
                    nurseItemBol:"",
                    change:'',
                    mnemonicCode:"",
                  unit:"",
                    disabled:"",
                },
                queryForm: {
                    currPageNo: 1,
                    limit: 8,
                    superMark:"",

                },
              disabled:false,
                  treeForm:{
                    disabled:"",
                      name:"",
                      mark:"",
                      parentMark:"",
                },
                rules:{
                    name:[{ required: true, message: "子项目名称", trigger: "blur"}],
                    // nurseItemBol:[{ required: true, message: "是否为护理项目", trigger: "change"}],
                    charged:[{ required: true, message: "是否为收费项目",trigger: "blur"}],


                },
                nodeData:{

                },
                defaultProps: {
                    children: "items",
                    label: "name"
                }
            }
        },
        mounted(data){
         console.log(this.data)
            this.search()
            this.searchchild()
        },
        methods: {
            searchAllItemInfos(){
                console.log(this.form);
               if(this.form.mnemonicCodeOrName!=""){
                   searchAllItemInfos( this.form).then(res =>{
                       this.queryForm.currPageNo=1
                       this.total=0
                       console.log(res)
                       this.list=res.data


                       setTimeout(() => {
                           this.listLoading = false;
                       }, 500);
                   })
               }else {
                   this.searchchild()
               }

            },
            append() {

                  console.log(this.treeForm.name)
                const newChild = {name: this.treeForm.name, items: [] };
                if (!this.nodeData.items) {
                    this.$set(this.nodeData, 'items', []);
                }



                this.$refs.treeForm.validate(async (valid) => {
                    if (valid) {
                     console.log(this.treeForm)
                         const {code,data} = await add(this.treeForm);
                        console.log(data)
                        if(code==200){

                            this.$baseMessage("添加成功");
                            this.search()
                            this.nodeData.items.push(newChild);


                        }else {
                            this.$baseMessage("添加失败");
                        }

                    }
                });

            },

            handleAdd() {
                this.treeForm.name=""
                this.dialogFormVisible=true
            },

            handleAdds(node) {
                this.treeForm.name=""
                this.nodeData = node
                console.log(node.mark)
                this.treeForm.parentMark=node.mark
                this.titles=node.name
                this.expanded=node.id
                this.dialogFormVisibles=true
            },
            handleAddss(node) {
                console.log(node)
                this.dialogFormVisibless=true
                 this.treeForm.disabled=node.disabled
                this.treeForm.name=node.name
                this.treeForm.mark=node.mark
                this.titles=node.name

                if(node.disabled==true){

                  this.value="true"
                }else {

                    this.value="false"

                }
            },
          changrpe(data){
              console.log(data)
            this.treeForm.disabled=data
          },
            replei(){
                console.log(this.treeForm)

                replei(this.treeForm).then(res =>{
                    console.log(res)

                        this.$baseMessage("修改成功");

                    this.search()




                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);
                })
            },
            search(){
                search().then(res =>{
                    console.log(res.data)

                   this.data=(res.data)

                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);
                })
            },
            change1(data){

                this.childtreeForm.nurseItemBol=data
            },
            change2(data){
                this.childtreeForm.charged=data

                console.log(data)
                if(data=='true'){

                    this.value3='false'
                    this.isshow=true
                }else {

                    this.childtreeForm.fee=""
                    this.childtreeForm.change=""
                    this.isshow=false
                    this.value3=""
                }
            },
            change3(data){
                this.childtreeForm.change=data
            },
            Saveadd(data){

                console.log(data)

                this.$refs.treeForm.validate(async (valid) => {
                    console.log(data)
                    if (valid) {

                        const {code,data} = await add(this.treeForm);
                        console.log(data)
                        if(code==200){
                            this.$baseMessage("添加成功");
                            this.$nextTick(function () {
                                this.search()
                            })

                        }else {
                            this.$baseMessage("添加失败");
                        }

                    }
                });
            },
            editsave(data){

                editsave(this.treeForm).then(res =>{
                    console.log(res.data)

                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);
                })
            },

            childadd(id,data){
                this.id = id
                console.log(data)
                if(id>0){
                    this.childdialogFormVisible=true
                  this.disabled=true
                    this.title="修改子项目";
                    // this.childtreeForm={
                    //    ...data
                    // }
                    console.log(data)
                    if(data.change==null){
                        this.childtreeForm.change='false'
                    }else {
                        this.childtreeForm.change=data.change
                    }

                    this.childtreeForm.charged=data.charged
                    this.childtreeForm.disabled=data.disabled
                    this.childtreeForm.fee=data.fee
                    this.childtreeForm.mark=data.mark
                    this.childtreeForm.mnemonicCode=data.mnemonicCode
                    this.childtreeForm.name=data.name
                  this.childtreeForm.unit=data.unit
                    if(data.nurseItemBol==true){

                        this.value1="true"
                    }else {

                        this.value1="false"
                    }
                    if(data.charged==true){

                        this.value2="true"
                        this.isshow=true
                    }else {
                        this.isshow=false
                        this.value2="false"
                    }
                    if(data.change==true){

                        this.value3="true"

                    }else {

                        this.value3="false"
                    }

                }else {

                  this.disabled=false
                    this.childtreeForm.mnemonicCode=""
                    this.childtreeForm.name=""
                    this.childtreeForm.fee=""
                    this.childtreeForm.charged=""
                    this.childtreeForm.nurseItemBol=""
                    this.childtreeForm.change=""
                    this.value1=""
                    this.value2=""
                    this.value3=""
                    this.isshow=false
                  this.childtreeForm.unit=""
                    this.childdialogFormVisible=true
                    this.title = "添加子项目";

                }



            },
            childsave(){
                this.$refs['childtreeForm'].validate(async (valid) => {
                    if (valid) {
                        if(this.id>0){
                            console.log(this.childtreeForm)
                            repchild(this.childtreeForm).then(res =>{
                                console.log(res)
                                if(res.code==200){

                                    this.$baseMessage("修改成功");
                                    this.search()
                                    this.searchchild()
                                    this.childdialogFormVisible=false

                                }else {
                                    this.$baseMessage("修改失败");
                                }

                                setTimeout(() => {
                                    this.listLoading = false;
                                }, 500);
                            })
                         console.log(this.childtreeForm)
                        }else{
                            this.childtreeForm.change=this.value3
                            createchild(this.childtreeForm).then(res =>{
                                console.log(res)
                                if(res.code==200){

                                    this.$baseMessage("添加成功");
                                    this.searchchild()
                                    this.search()
                                    this.childdialogFormVisible=false

                                }else {
                                    this.$baseMessage("添加失败");
                                }

                                setTimeout(() => {
                                    this.listLoading = false;
                                }, 500);
                            })
                        }




                    } else {
                        return false;
                    }
                });


            },

            //点击树形组件事件
            handleNodeClick(data,node) {


                       this.$nextTick(function () {
                           this.childtreeForm.parentMark=data.mark
                           this.queryForm.superMark=data.mark
                           this.expanded=data.id
                           console.log(data,node)
                           this.searchchild()
                           this.ischildadd=true
                           this.queryForm.currPageNo=1

                       })



            },
            searchchild(){
                this.listLoading=true
                searchchild( this.queryForm).then(res =>{
                    console.log(res)
                    this.list=res.data.data
                    this.total=res.data.total

                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);
                })
            },
            handleSizeChange(val,mark) {
                this.queryForm.limit = val;

                 this.searchchild()
            },
            handleCurrentChange(val,) {
                this.queryForm.currPageNo = val;

                 this.searchchild()
            },
            close(){
                this.dialogFormVisible=false
                this.dialogFormVisibles=false
                this.dialogFormVisibless=false
                this.childdialogFormVisible=false
            }
        },



    }
</script>

<style scoped>
  /*.tree-container{*/
  /*  height: calc( 100vh - 60px - 55px - 20px - 20px - 55px - 30px) !important;*/
  /*}*/
  .tree-container >>> .el-container{
   min-height: calc( 100vh - 120px - 55px - 20px - 20px - 55px - 30px ) !important;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }


  .tree-container >>>.el-tree-node__content{
    height:35px !important;
  }
</style>
